<script type="text/javascript" src="{{ STATIC_PREFIX }}js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script>
    $(function() {
        $('#startPicker').datepick({
                     dateFormat: 'yyyy-mm-dd'});
    });
</script>
<article class="module width_full">
    <header>
        <h3>状态</h3>
    </header>
    <div>
        <form accept="" method="get">
            <p>
            <input type="text" id="startPicker" name="startPicker" size="10">
            <input type="submit" value="查询">
        </p>
        </form>
    </div>
    <div class="module_content">
        <article class="stats_graph">
            <div id="chart_bar"></div>
            <script type="text/javascript">
                pv_bar = {{ pv_list }};
                uv_bar = {{ uv_list }};
                ip_bar = {{ ip_list }};
                plot2 = $.jqplot('chart_bar', [pv_bar, uv_bar, ip_bar], {
                            legend:{show:true, location:'ne', xoffset:55},
                            title:'',
                            seriesDefaults:{
                                renderer:$.jqplot.BarRenderer,
                                rendererOptions:{barPadding: 8, barMargin: 20},
                                pointLabels: { show: true , formatString: '%d'}
                            },
                            series:[
                                {label:'PV'},
                                {label:'UV'},
                                {label:'IP'}
                            ],
                            axes:{
                                xaxis:{
                                    renderer:$.jqplot.CategoryAxisRenderer,
                                    ticks:['第一事业部', '第二事业部', '第三事业部', '第四事业部', '第五事业部','技术']
                                },
                                yaxis:{min:0}
                            }
                        });
            </script>
        </article>
        <div class="clearfix"></div>
    </div>
</article>